<template>
	<view>
		<view class="content">
			<view class="form">
				<!-- <view class="form-item p-t-b">
					<view class="form-item-label">新增产品</view>
					<view class="form-item-right just-end" @click="autoAudit = !autoAudit">
						<image class="form-item-icon" :src="$xcxImg('/radio'+(autoAudit?'':'1')+'.png')" />
						审核后直接上架
					</view>
				</view> -->
				<view class="form-item" v-for="(v, k) in formList" :key="k">
					<rowInputVue class="w100" v-if="v.type == 'input'" :item="v" v-model="form[v.field]" />
					<rowChooseVue class="w100" v-if="v.type == 'picker' && v.isShow" :item="v" v-model="form[v.field]" />
					<rowUploadVue class="w100" v-if="v.type == 'upload'" :item="v" v-model="form[v.field]" />
					<uploadVue class="w100" v-if="v.type == 'uploads'" :item="v" v-model="form[v.field]" />
					<editorVue class="w100" v-if="v.type == 'editor'" :item="v" v-model="form[v.field]" />
				</view>
				<block v-for="(v, k) in sku" :key="k">
					<view class="form-item column p-t-b">
						<view class="form-item-title border-bottom">
							<input type="text" v-model="v.title" placeholder="请输入规格类型" />
							<view class="form-item-title-tool" @click="delBigSku(k)">
								<image class="del-icon" :src="$showImg('/images/demo/common/sc.png')"></image>
								删除
							</view>
						</view>
						<view class="sku-item">
							<view class="sub-sku" v-for="(vv, kk) in v.skuitem" :key="kk">
								<input type="text" v-model="vv.name" @input="reduceMultipleArr" />
								<view></view>
								<image class="close-icon" @click="delSku(v, kk)"
									:src="$showImg('/images/demo/common/cha.png')"></image>
							</view>
							<view class="add-sku" @click="addSku(v.skuitem)">+添加新规格</view>
						</view>
					</view>
				</block>
				<view class="form-item column p-t-b">
					<view class="form-item-title"> 规格 </view>
					<block v-for="(v, k) in priceList" :key="k">
						<view style="margin-bottom: 20rpx">
							<view class="tabs">
								<block v-for="(vv, kk) in v.temp" :key="kk">
									<view class="tab">{{ vv }}</view>
								</block>
							</view>
							<view class="sku-price border-bottom">
								<view class="flex">
									<view>商品价格</view>
									<input type="text" v-model="v.price" placeholder="价格" />
								</view>
								<view class="flex">
									<view>库存</view>
									<input type="text" v-model="v.kuc" placeholder="库存" />
								</view>
								<view class="flex">
									<view>编码</view>
									<input type="text" v-model="v.sn" placeholder="编码" />
								</view>
								<view class="flex">
									<view>重量</view>
									<input type="text" v-model="v.weigh" placeholder="重量" />
								</view>
								<view class="flex">
									<view>结算金额</view>
									<input type="text" v-model="v.cost_price" placeholder="结算金额" />
								</view>
							</view>
						</view>
					</block>
					<view class="add-big-sku" @click="addBigSku">新增规格</view>
				</view>
			</view>
			<view class="btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		applyShop,
		getGoodsCategory,
		getShopGoodsCategory,
		addGoods,
		getGoodsLogistics,
		getBrandList,
		getGoodsDetailis,
		editGoods,
	} from "@/API/business.js";

	import {
		GetShopDetail
	} from "@/API/store.js";

	import {
		ocr
	} from "@/API/common.js";

	import rowInputVue from "@/components/form/rowInput.vue";
	import rowChooseVue from "@/components/form/rowChoose.vue";
	import rowUploadVue from "@/components/form/rowUpload.vue";
	import uploadVue from "@/components/form/upload.vue";
	import editorVue from "@/components/form/editor.vue";

	import func from "@/utils/func.js";
	import st from "@/utils/showtoast.js";
	export default {
		components: {
			rowInputVue,
			rowChooseVue,
			rowUploadVue,
			uploadVue,
			editorVue,
		},
		data() {
			return {
				autoAudit: true,

				sku: [],
				priceList: [],

				cateList: [], //分类列表
				shopCateList: [], // 店铺内分类
				freightList: [], // 模版列表
				brandList: [], // 品牌列表

				id: 0,

				shop_type: "", // 商品类型

				form: {
					title: "", // 标题
					category_id: "", // 商城分类
					shop_category_id: "", // 店铺内分类
					freight_id: "", // 运费模版
					brand_id: "",
					image: "", // 商品图
					images: [], // 商品轮播图
					content: "", // 商品详情
					validity_time: "", //结束时间
					delivery_type: "",
					spu: "", //
					sku: "", //
				},
				
				cateList: [], //分类列表
				shopCateList: [], //店铺内部分类
				freightList: [], //运费模版列表
				brandList: [], //品牌列表
				userInfo: null,
			};
		},
		computed: {
			formList() {
				return [{
						type: "input",
						title: "商品名称",
						require: true,
						maxlength: 100,
						place: "请输入商品名称",
						field: "title",
						isShow: true,
					},
					{
						title: "商品类型",
						require: true,
						type: "picker",
						direct: "row",
						field: "delivery_type",
						mode: "selector",
						rangeKey: "title",
						list: [{
								title: "卡券/套餐",
								id: "1"
							},
							{
								title: "自提商品",
								id: "2"
							},
							{
								title: "同城配送",
								id: "3"
							}
						],
						isArrow: true,
						place: "请选择商品类型",
						tips: "请选择商品类型",
						isShow: this.userInfo === null ? false : this.userInfo.shop_id.shop_type == "0",
					},
					{
						type: "picker",
						title: "商品分类",
						require: true,
						place: "请选择商品分类",
						mode: "multiSelector",
						rangeKey: "name",
						next: "children",
						level: 3,
						list: this.cateList,
						field: "category_id",
						isArrow: true,
						isShow: true,
					},
					{
						type: "picker",
						title: "店铺内部分类",
						require: false,
						place: "请选择店铺内部分类",
						mode: "multiSelector",
						rangeKey: "name",
						next: "children",
						level: 3,
						list: this.shopCateList,
						field: "shop_category_id",
						isArrow: true,
						isShow: true,
					},
					{
						type: "picker",
						title: "运费模版",
						require: true,
						place: "请选择运费模版",
						mode: "selector",
						rangeKey: "name",
						list: this.freightList,
						field: "freight_id",
						isArrow: true,
						isShow: this.userInfo === null ? false : this.userInfo.shop_id.shop_type == "1",
					},
					{
						type: "picker",
						title: "品牌",
						require: false,
						place: "请选择品牌",
						mode: "selector",
						rangeKey: "name",
						list: this.brandList,
						field: "brand_id",
						isArrow: true,
						isShow: true,
					},
					{
						type: "upload",
						title: "商品图片",
						require: true,
						place: "请上传商品图片",
						field: "image",
					},
					{
						type: "uploads",
						title: "商品轮播图",
						require: true,
						place: "请上传商品轮播图",
						field: "images",
					},
					{
						type: "editor",
						title: "商品详情",
						require: true,
						place: "请填写商品详情",
						field: "content",
					},
					{
						title: "有效期",
						require: true,
						type: "input",
						field: "validity_time",
						place: "请输入有效期",
						maxlength: 4,
						mode: "number",
						isShow: true,
					}
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				uni.setNavigationBarTitle({
					title: "修改商品",
				});
				this.getGoodsDetails();
			}
			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.userInfo = res;
			});
			this.getShopDetail();
		},
		mounted() {
			this.getShopCategory();
			this.getFreightList();
			this.getBrandList();
		},
		methods: {
			componentsChanged(e, index) {
				this.formList[index].changed(e);
			},
			getShopDetail() {
				GetShopDetail().then((res) => {
					if (res.data.shop_type == 0) {
						this.shop_type = "local";
					} else {
						this.shop_type = "goods";
					}
					this.getCategory();
					// this.getCategory()
				});
			},
			getGoodsDetails() {
				getGoodsDetailis({
					ids: this.id,
				}).then((res) => {
					for (let i in this.form) {
						if (!["spu", "sku"].includes(i)) {
							this.form[i] = res.data[i];
						}
					}
					this.priceList = res.data.sku;
					this.sku = res.data.spu;
				});
			},
			getCategory() {
				getGoodsCategory({
					type: this.shop_type,
				}).then((res) => {
					this.cateList = res.data;
				});
			},
			getShopCategory() {
				getShopGoodsCategory().then((res) => {
					this.shopCateList = res.data;
				});
			},
			getFreightList() {
				getGoodsLogistics().then((res) => {
					this.freightList = res.data;
				});
			},
			getBrandList() {
				getBrandList().then((res) => {
					this.brandList = res.data;
				});
			},
			// 计算 2 个数组时一共组合情况
			reduceTwoArr(source1, source2, e) {
				let result = [];
				source1.forEach((item) => {
					source2.forEach((item2) => {
						result.push([item, item2]);
					});
				});
				return result;
			},
			// 计算多个数组时一共组合情况
			reduceMultipleArr() {
				let list = this.sku.map((v) => v.skuitem.map((vv) => vv.name));
				// return
				let newList = list.reduce((acc, currentItem) => {
					return this.reduceTwoArr(acc, currentItem);
				});

				let nl = [];
				newList.forEach((v) => {
					let item;
					if (Array.isArray(item)) {
						item = v;
					} else {
						item = [v];
					}
					nl.push({
						price: "",
						kuc: "",
						sn: "",
						weigh: "",
						cost_price: "",
						temp: this.digui(item),
					});
				});
				this.priceList = nl;
			},
			digui(arr) {
				let newList = [];

				arr.forEach((v) => {
					if (Array.isArray(v)) {
						newList = newList.concat(this.digui(v));
					} else {
						newList.push(v);
					}
				});

				return newList;
			},
			upload(field, arr = false) {
				func.upImage((res) => {
					if (field == "number") {
						ocr({
							path: res.data.url,
							type: "BusinessLicense",
						}).then((res) => {
							this.form[field] = res.RegisterNumber;
							this.form.shopname = res.Name;
							this.form.scope_business = res.Business;
							this.form.address = res.Address;
						});
					} else {
						if (arr === true) {
							this.form[field].push(res.data.url);
						} else {
							this.form[field] = res.data.url;
						}
					}
				});
			},
			delImg(index, field) {
				this.form[field].splice(index, 1);
			},
			addBigSku() {
				for (let i of this.sku) {
					let name = i.skuitem.filter((v) => !!v.name).map((v) => v.name);
					if (name.length == 0) {
						return this.$st.show("请先添加新规格");
					}
				}
				this.sku.push({
					title: "",
					skuitem: [],
				});
			},
			delBigSku(index) {
				this.sku.splice(index, 1);
				this.reduceMultipleArr();
			},
			addSku(skuitem) {
				skuitem.push({
					name: "",
				});
			},
			delSku(sku, index) {
				sku.skuitem.splice(index, 1);
				this.reduceMultipleArr();
			},
			submit() {
				for (let i of this.formList) {
					if (!this.form[i.field] && i.require && (i.isShow === undefined || i.isShow === true)) {
						return this.$st.show(i.place);
					}
				}
				if (!this.form.image) return this.$st.show("请上传商品图");

				// console.log('-=-=-=sku', this.priceList)
				// console.log('-=-=-=spu', this.sku)

				let data = {
					...this.form,
					spu: this.sku,
					sku: this.priceList,
				};

				let functions;
				if (this.id > 0) {
					data.id = this.id;
					functions = editGoods(data);
				} else {
					functions = addGoods(data);
				}

				functions
					.then((res) => {
						uni.navigateBack();
					})
					.catch((err) => {
						console.log("--=-=err", err);
					});
			},
			delImagesIndex(field, index) {
				this.form[field].splice(index, 1);
			},
		},
	};
</script>

<style lang="scss" scoped>
	view,
	text {
		line-height: unset;
	}

	.content {
		padding: 0 25rpx 50rpx;
		position: relative;

		.top-bg-img {
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.remark {
			font-weight: 400;
			font-size: $font-sm;
			color: $remark-color;
			line-height: 100rpx;
			text-align: center;
		}

		.form {
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			background: #ffffff;

			&-item.column {
				gap: 20rpx;
			}

			&-item {
				font-size: $font-big;
				display: flex;
				justify-content: space-between;
				padding: 0 27rpx;
				border-radius: 10rpx;

				picker {
					font-size: $font-base;
				}

				textarea {
					font-size: $font-sm;
					margin-top: 20rpx;
				}

				&-upload {
					width: 180rpx;
					height: 180rpx;
				}

				.border-bottom {
					border-bottom: 1px solid #eeeeee;
				}

				&-title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 500;
					font-size: 30rpx;
					color: #121212;
					line-height: 36rpx;
					padding-bottom: 30rpx;

					input {
						font-weight: normal;
						text-align: left;
					}

					&-tool {
						display: flex;
						align-items: center;
						gap: 10rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #888888;
						line-height: 37rpx;
					}
				}

				.sku-item {
					display: flex;
					gap: 10rpx;
					padding-top: 10rpx;
					flex-wrap: wrap;

					.sub-sku {
						// width: 160rpx;
						height: 50rpx;
						background: #f7f7f7;
						border-radius: 25rpx;
						padding: 10rpx 24rpx;
						display: flex;
						gap: 15rpx;
						align-items: center;

						>view {
							width: 2rpx;
							height: 26rpx;
							background-color: #ddd;
						}

						input {
							width: 50rpx;
							height: 20rpx;
							text-align: right;
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
						}
					}
				}

				.tabs {
					display: flex;
					gap: 30rpx;

					.tab {
						width: 140rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						background: #f7f7f7;
						border-radius: 25rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
					}
				}

				.add-sku {
					width: 200rpx;
					height: 50rpx;
					text-align: center;
					background: #f7f7f7;
					border-radius: 25rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #eb5c20;
					line-height: 50rpx;
				}

				.sku-price {
					display: flex;
					flex-wrap: wrap;
					font-weight: 500;
					font-size: 28rpx;
					color: #121212;
					line-height: 36rpx;
					justify-content: space-between;

					>view {
						width: 48%;
						padding: 10rpx 0;
						display: flex;
						align-items: center;
						gap: 25rpx;
						white-space: nowrap;

						>view {
							width: 40%;
						}

						input {
							width: 140rpx;
						}
					}
				}

				&-label {
					font-weight: 400;
					font-size: $font-base;
					position: relative;
					display: flex;
					justify-content: space-between;
				}

				&-right {
					display: flex;
					min-width: 400rpx;
					gap: 20rpx;
					font-weight: 400;
					font-size: $font-base;
					align-items: center;

					input {
						text-align: right;
						width: 400rpx;
					}

					>view {
						display: flex;
						gap: 10rpx;
					}
				}

				&-icon {
					width: 40rpx;
					height: 40rpx;
				}

				radio-group {
					display: flex;

					label {
						display: flex;
						font-size: $font-base;
					}
				}
			}

			&-require {
				padding-left: 20rpx;
			}

			&-require::before {
				content: "*";
				position: absolute;
				left: 0;
				top: 0;
				color: #f00;
			}
		}
	}

	.btn {
		width: 610rpx;
		height: 92rpx;
		background: linear-gradient(90deg, $gradient-light-color, $gradient-dark-color);
		border-radius: 46rpx;
		margin: 50rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 34rpx;
		color: #ffffff;
	}

	.wrap {
		flex-wrap: wrap;
	}

	.add-big-sku {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #dd551b, #f49355);
		border-radius: 36rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 30rpx;
		color: #ffffff;
	}

	.w100 {
		width: 100% !important;
	}

	.p-t-b {
		padding-top: 20rpx !important;
		padding-bottom: 20rpx !important;
	}
</style>